<script setup lang="ts">
import {onMounted, ref} from "vue";
import {navApi} from "@/api/blog/navApi.ts";
import {TreeProps} from "tdesign-vue-next";
const menuList = ref()
const visible = ref(false)
const selectMenu = ref({
  menuName: '',
  status: 0
})

onMounted(()=>{
  getMenuPage(1,10)
})
/**
 * 构建符合t-design tree组件的data
 * @param menuList
 */
function createTreeProps(menuList: Menu[]) {
  const tree:TreeProps['data'] = []
  menuList.forEach((item: Menu) => {
    const treeItem = {
      value: item.id,
      path: item.path || '',
      label: item.navName,
      children: (Array.isArray(item.subNavList) && item.subNavList.length > 0) ? createTreeProps(item.subNavList) : []
    }
    tree.push(treeItem)
  })
  return tree
}
const getMenuPage = (current: number, size: number,menuName?: string, status?: number) => {
  navApi.getNavList(current,size,menuName,status).then(res=>{
    menuList.value = createTreeProps(res.data)
  })
}
</script>
<template>
  <div class="menu">
    <t-card class="menu-header">
      <div class="menu-search">
        请输入菜单名称:
        <t-input class="menu-input" v-model:value="selectMenu.menuName" placeholder="请输入菜单名称"/>
        请选择菜单状态:
        <t-select class="menu-select" v-model:value="selectMenu.status">
          <t-option label="启用" :value="0" />
          <t-option label="禁用" :value="1" />
        </t-select>
        <t-button theme="primary" @click="getMenuPage(1,10,selectMenu.menuName,selectMenu.status)">
          查询
        </t-button>
        <t-button theme="default" @click="selectMenu={menuName:'',status:0}">
          重置
        </t-button>
      </div>
      <t-button theme="primary" @click="visible = true">
        <t-icon name="plus"/>
        新增菜单
      </t-button>
      <t-dialog v-model:visible="visible"
                header="新增菜单"
      >
        <h1>新增菜单</h1>
      </t-dialog>
    </t-card>
    <t-card class="menu-list">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-tree
          :data="menuList"
          activable
          hover
          transition
      >
        <template #operations="{ node }">
          <t-space :size="10">
            <t-link theme="primary" hover="color" style="margin-left: 16px" >新增</t-link>
            <t-link theme="primary" hover="color" style="margin-left: 16px" >编辑</t-link>
            <t-link theme="danger" hover="color" style="margin-left: 16px" >删除</t-link>
          </t-space>
        </template>
      </t-tree>
    </t-card>
    <div class="menu-footer">
    </div>
  </div>
</template>

<style scoped lang="less">
.menu {
  .menu-header {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    .menu-search {
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      .menu-input {
        width: 200px;
      }
      .menu-select {
        width: 200px;
      }
    }
  }
  .menu-list {
    margin: 16px;
  }
}

.t-button {
  width: 100px;
  transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  .t-icon {
    font-size: 20px;
    &.general {
      margin-right: 16px;
    }
  }
}
</style>
